<script setup lang="ts">
  import { ref } from 'vue';
  import { VAceEditor } from 'vue3-ace-editor';
  import 'ace-builds/src-noconflict/mode-groovy';
  import 'ace-builds/src-noconflict/theme-github';
  import 'ace-builds/src-noconflict/theme-chrome';

  const code = ref<string>('println "Hello, Groovy!');
  const readonlyFlag = ref<boolean>(false);
  function putCode(value: string) {
    code.value = value;
  }
  function putReadFlag(value: boolean){
    readonlyFlag.value = value;
  }
  defineExpose({ code, putCode, putReadFlag });
  const language = ref('groovy');
  const theme = ref('chrome');
  const editorOptions = ref({
    fontSize: '14px',
    showPrintMargin: false,
    /*  enableBasicAutocompletion: true,
      enableLiveAutocompletion: true,*/
    useSoftTabs: true,
    tabSize: 2,
  });
</script>

<template>
  <VAceEditor
    v-model:value="code"
    :lang="language"
    :theme="theme"
    :options="editorOptions"
    :readonly="readonlyFlag"
    style="height: 400px; width: 100%"
  />
</template>
